<template>
  <div class="image-preview-container">
    <div class="image-controls">
      <el-button-group class="control-group">
        <el-tooltip content="放大" placement="top">
          <el-button @click="zoom(0.2)" icon="el-icon-zoom-in" />
        </el-tooltip>
        <el-tooltip content="缩小" placement="top">
          <el-button @click="zoom(-0.2)" icon="el-icon-zoom-out" />
        </el-tooltip>
        <el-tooltip content="重置" placement="top">
          <el-button @click="reset" icon="el-icon-refresh-left" />
        </el-tooltip>
        <el-tooltip content="旋转" placement="top">
          <el-button @click="rotate" icon="el-icon-refresh" />
        </el-tooltip>
        <el-tooltip :content="isFullscreen ? '退出全屏' : '全屏'" placement="top">
          <el-button @click="$emit('toggle-fullscreen')" :icon="isFullscreen ? 'el-icon-close' : 'el-icon-full-screen'" />
        </el-tooltip>
      </el-button-group>

      <div class="scale-display">
        缩放：{{ (scale * 100).toFixed(0) }}%
      </div>
    </div>

    <div class="image-wrapper" :style="wrapperStyle">
      <img
        ref="imageEl"
        :src="src"
        :style="imageStyle"
        @load="handleLoad"
        @error="handleError"
        class="preview-image"
      />

      <div v-if="loading" class="loading-overlay">
        <i class="el-icon-loading" />
        加载中...
      </div>

      <div v-if="error" class="error-overlay">
        <i class="el-icon-picture-outline" />
        <p>图片加载失败</p>
        <el-button type="primary" size="mini" @click="retry">
          重试
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    src: {
      type: String,
      required: true
    },
    isFullscreen: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      loading: true,
      error: false,
      scale: 1,
      rotation: 0,
      naturalSize: { width: 0, height: 0 }
    }
  },
  computed: {
    imageStyle() {
      return {
        transform: `scale(${this.scale}) rotate(${this.rotation}deg)`,
        transition: 'transform 0.3s ease'
      }
    },
    wrapperStyle() {
      return {
        cursor: this.scale > 1 ? 'grab' : 'default',
        transform: `rotate(${this.rotation}deg)`
      }
    }
  },
  methods: {
    handleLoad(event) {
      this.loading = false
      this.error = false
      this.naturalSize = {
        width: event.target.naturalWidth,
        height: event.target.naturalHeight
      }
      this.fitToContainer()
    },
    handleError() {
      this.loading = false
      this.error = true
    },
    zoom(delta) {
      this.scale = Math.min(5, Math.max(0.2, this.scale + delta))
    },
    reset() {
      this.scale = 1
      this.rotation = 0
    },
    rotate() {
      this.rotation = (this.rotation + 90) % 360
    },
    fitToContainer() {
      const container = this.$el.querySelector('.image-wrapper')
      if (!container) return

      const containerWidth = container.clientWidth
      const containerHeight = container.clientHeight
      const ratio = Math.min(
        containerWidth / this.naturalSize.width,
        containerHeight / this.naturalSize.height
      )
      this.scale = Math.min(1, ratio)
    },
    retry() {
      this.loading = true
      this.error = false
      this.$refs.imageEl.src = this.src + '?retry=' + Date.now()
    }
  }
}
</script>

<style scoped>
.image-preview-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.image-controls {
  padding: 10px;
  background: #f5f7fa;
  border-bottom: 1px solid #ebeef5;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.control-group {
  margin-right: 20px;
}

.scale-display {
  color: #606266;
  font-size: 14px;
}

.image-wrapper {
  flex: 1;
  overflow: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.preview-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transform-origin: center center;
}

.loading-overlay,
.error-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #606266;
}

.error-overlay p {
  margin: 10px 0;
}
</style>
